<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Demo</title>
  <script type="importmap">
    {
        "imports": {
            "three": "./three.module.min.js",
            "@mkkellogg/gaussian-splats-3d": "./gaussian-splats-3d.module.min.js"
        }
    }
  </script>
  <style>body { background-color: #000000; height: 100vh; margin: 0px; }</style>
</head>
<body>
  <script type="module">
    import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
    const paramsUri = new URLSearchParams(window.location.search).get('p') || 'params.json';
    const enableSharedMemory = false;
    fetch(paramsUri).then(response => response.json()).then(params => {
      // Update background
      if (params.backgroundColor)
        document.body.style.backgroundColor = params.backgroundColor;
      // Make params.sceneUri relative to paramsUri
      const url = new URL(paramsUri, window.location.href);
      const sceneUri = new URL(params.sceneUri, url.href).href;
      const viewer = new GaussianSplats3D.Viewer({
          sharedMemoryForWorkers: enableSharedMemory,
          cameraUp: params.cameraUp,
          initialCameraPosition: params.initialCameraPosition,
          initialCameraLookAt: params.initialCameraLookAt,
          antialiased: params.antialiased || false,
          kernel2DSize: (params.kernel2DSize === undefined) ? 0.3 : params.kernel2DSize,
          splatRenderMode: GaussianSplats3D.SplatRenderMode[params.splatRenderMode || 'ThreeD'],
      });
      viewer.init();
      viewer.addSplatScene(sceneUri, {
        position: params.offset,
        scale: [params.scale, params.scale, params.scale],
        rotation: params.rotation,
      }).then(() => { viewer.start(); });
    });
  </script>
</body>
</html>
